<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>登录 - 备件管理系统</title>
  <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
  <style>
    body {
      background-color: #f5f7fa;
    }
  </style>

  <link rel="icon" href="img/favicon.ico" type="image/x-icon">

</head>
<body>
<div id="app">
  <el-container style="height: 100vh;">
    <el-main style="display: flex; align-items: center; justify-content: center;">
      <el-row gutter="20" style="width: 840px;">
        <el-col :span="12" style="display: flex; align-items: center; justify-content: center;">
          <div style="width: 200px; height: 200px; display: flex; align-items: center; justify-content: center;">
            <img src="img/logo.png" alt="登录图片" style="width: 100%; height: 100%; object-fit: cover; border-radius: 10px;">
          </div>
        </el-col>
        <el-col :span="12">
          <el-card style="width: 400px; padding: 20px;">
            <h2 style="text-align: center; margin-bottom: 20px;">备件管理系统</h2>
            <el-form :model="form" label-position="top" @submit.prevent="login">
              <el-form-item label="用户名">
                <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
              </el-form-item>
              <el-form-item label="密码">
                <el-input v-model="form.password" show-password placeholder="请输入密码"></el-input>
              </el-form-item>
              <el-button type="primary" native-type="submit" style="width: 100%;" :loading="loading">登录</el-button>
            </el-form>
            <p style="text-align: center; margin-top: 15px; font-size: 13px; color: #666;">
              示例账号：管理员：admin / admin123
                      操作员：operator / operator456
            </p>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</div>


<!-- 引入 Vue + Axios + Element Plus -->
<script src="https://unpkg.com/vue@3.2.36/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/element-plus"></script>

<script>
  const { createApp } = Vue;

  const app = createApp({
    data() {
      return {
        form: {
          username: '',
          password: ''
        },
        loading: false
      };
    },
    methods: {
      async login() {
        if (!this.form.username || !this.form.password) {
          this.$message.error('用户名或密码不能为空');
          return;
        }

        this.loading = true;

        try {
          const res = await axios.get('/api/users/listall');
          const user = res.data.find(u => u.username === this.form.username && u.password === this.form.password);

          if (user) {
            if (user.role === '操作员') {
              this.$message.success('登录成功');
              window.location.href = '/operator.html'; // 跳转到操作员界面
            } else if(user.role === '管理员') {
              this.$message.success('登录成功');
              window.location.href = '/dashboard.html'; // 跳转到管理员界面
            }
            else {
              this.$message.error('用户角色错误');
            }
          } else {
            this.$message.error('用户名或密码错误');
          }
        } catch (err) {
          console.error(err);
          this.$message.error('登录失败，请检查网络连接');
        } finally {
          this.loading = false;
        }
      }
    }
  });

  app.use(ElementPlus);
  app.mount('#app');
</script>
</body>
</html>
